<template>
  <el-row>
    <el-col class="flex justify-center" style="padding-top: 10px">
      <p class="font-black font-sans text-xl">基于区块链技术构建茶叶溯源平台</p>
    </el-col>
    <el-col style="padding-top: 10px">
      <div class="marquee-container bg-blue-50">
        <div class="marquee">
          <div
            class="flex items-center text-blue-500 text-base"
            style="height: 50px"
          >
            <el-icon><Bell /></el-icon>欢迎使用基于区块链技术构建农业溯源与资平台，该产品是由"{{ text }}"生产，一物一码真实溯源。
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col  v-if="isMounted">
      <el-image
        style="width: 95%; height: 250px;padding-left: 5%;"
        :src="table.cptp"
      ></el-image>
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <el-card shadow="always">
        <el-row>
          <el-col class="flex justify-center" style="padding-bottom: 10px;">
            <p class="text-xl font-bold">产地档案</p>
          </el-col>
          <el-col v-if="isMounted">
            <sym-info-table
                :option-info="originFileInfo"
                :table-data="table"
            ></sym-info-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="flex justify-center" style="padding-bottom: 10px;">
            <p class="text-xl font-bold">产品档案</p>
          </el-col>
          <el-col v-if="isMounted">
            <sym-info-table
                :option-info="productFileInfo"
                :table-data="table"
            ></sym-info-table>
          </el-col>
        </el-row>
        <el-row class="flex justify-center">
          <el-col class="flex justify-center" style="padding-bottom: 10px;">
            <p class="text-xl font-bold">企业认证</p>
          </el-col>
          <el-col v-if="isMounted">
            <sym-info-table
                :option-info="enterpriseFile"
                :table-data="table"
            ></sym-info-table>
          </el-col>
        </el-row>
        <el-row class="flex justify-center" style="height: 100%">
          <map-table >
          </map-table>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {Bell} from "@element-plus/icons-vue";
import {useSymContentStore, useUserStore} from "@/stores/myStore.js";
import {originFileInfo} from "@/api/options/fivePart/originFileInfo.js";
import SymInfoTable from "@/components/table/symInfoTable.vue";
import {productFileInfo} from "@/api/options/fivePart/productFile.js";
import {enterpriseFile} from "@/api/options/fivePart/enterpriseFile.js";
import MapTable from "@/components/table/mapTable.vue";
import {initWlTableInfo} from "@/api/methods/initInfo.js";
import {upSymInfo} from "@/api/apiPath/fivePart.js";
import {useRouter} from "vue-router";
const router = useRouter()
const SymTableData = useSymContentStore()
const userInfo = useUserStore()
console.log(SymTableData.symData)
const behavior = ref("scroll");
const direction = ref("right");
const scrollamount = ref(100);
const isMounted = ref(false);
const table = ref()
const text = ref('')
onMounted(async ()=> {
    console.log(router.currentRoute.value.params.id)
    table.value = await initWlTableInfo(upSymInfo(router.currentRoute.value.params.id))
    console.log(table.value)
    if (table.value === null) {
        text.value= userInfo.auth.user.qymc
    } else {
        text.value = table.value.qymc
    }
    isMounted.value = true
})
</script>

<style scoped>
.marquee-container {
  width: 100%;
  overflow: hidden;
}

.marquee {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  animation: marquee 6s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-160%);
  }
}
</style>